<!--
 - FileName:
 - Created: Administrator
 - CreateAt: 2018-05-07 09:54
 - version:
 - Author: main
 - E-mail: 375277023@qq.com
-->
<template lang="pug">
  .back-top(@click.stop="backtop" title="返回页面顶部" role="button" tabindex="0")
    //- span(v-show="show") mdi
    van-icon.icon(name="mdi-arrow-up-bold mdi mdi-24px" v-show="show")

</template>

<script type="text/ecmascript-6">

  const scrollTop = function (el, from = 0, to, duration = 500, callback) {
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = (
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          return window.setTimeout(callback, 1000 / 60)
        }
      )
    }
    const difference = Math.abs(from - to)
    const step = Math.ceil(difference / duration * 50)

    function scroll(start, end, step) {
      if (start === end) {
        typeof callback === 'function' && callback()
        return
      }

      let d = (start + step > end) ? end : start + step
      if (start > end) {
        d = (start - step < end) ? end : start - step
      }

      if (el === window) {
        window.scrollTo(d, d)
      } else {
        el.scrollTop = d
      }
      window.requestAnimationFrame(() => scroll(d, end, step))
    }

    scroll(from, to, step)
  }

  const getScrollview = function (el) {
    let currentNode = el
    while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
      let overflowY = document.defaultView.getComputedStyle(currentNode).overflowY
      if (overflowY === 'scroll' || overflowY === 'auto') {
        return currentNode
      }
      currentNode = currentNode.parentNode
    }
    return window
  }

  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      backtop() {
        let top = 0
        if (this.scrollView === window) {
          if (document.documentElement && document.documentElement.scrollTop) {
            top = document.documentElement.scrollTop
          } else {
            top = document.body.scrollTop
          }
        } else {
          top = this.scrollView.scrollTop
        }
        scrollTop(this.scrollView, top, 0)
      },
      scrollHandler() {
        let offsetTop = window.pageYOffset
        let offsetHeight = window.innerHeight
        if (this.scrollView !== window) {
          offsetTop = this.scrollView.scrollTop
          offsetHeight = this.scrollView.offsetHeight
        }
        this.show = offsetTop >= offsetHeight / 2
      },
      throttle(method, context) {
        clearTimeout(method.tId)
        method.tId = setTimeout(() => {
          method.call(context)
        }, 50)
      },
      throttledCheck() {
        this.throttle(this.scrollHandler)
      }
    },
    mounted() {
      this.scrollView = getScrollview(this.$el)
      this.scrollView.addEventListener('scroll', this.throttledCheck, false)
      this.scrollView.addEventListener('resize', this.scrollHandler, false)
    },
    beforeDestroy() {
      this.scrollView.removeEventListener('scroll', this.throttledCheck, false)
      this.scrollView.removeEventListener('resize', this.scrollHandler, false)
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .icon
    background-color: rgba(0,0,0, .3);
    position: fixed;
    z-index 1999
    border-radius: 50%;
    right: 5%;
    bottom: 150px;
    width 3rem
    height 3rem
    text-align center
    color #fff
</style>
